<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { homeStoriesStore } from "@/store";
import { storeToRefs } from "pinia";
import useClipboard from 'vue-clipboard3'
import 'vant/es/toast/style';
import { Toast } from "vant";

const { toClipboard } = useClipboard()

const router = useRouter()

const store = homeStoriesStore();
let { shareList } = storeToRefs(store);

function goBackFunc() {
    router.go(-1);
}

// 点击复制
function touchCopy(url: string) {
    // 调用
    copy(url)
}
// 使用插件

const copy = async (msg: string) => {
    try {
        // 复制
        await toClipboard(msg);
        Toast('复制成功');
        // 复制成功
    } catch (e) {
        // 复制失败
        Toast('复制失败');
    }
}


</script>

<template>
    <div class="h-screen w-screen p-5">
        <img class="w-10 h-10 absolute right-5 " src="@/assets/share/close_gray.png" alt="img" @click="goBackFunc" />
        <div class="flex flex-col items-center justify-between h-3/5 mt-48 ">
            <img class="w-20 h-20 " src="@/assets/share/bubble_moment.png" alt="img" v-if="shareList?.wx_timeline.link"
                @click="touchCopy(shareList?.wx_timeline.link || '')" />
            <img class="w-20 h-20 " src="@/assets/share/bubble_wechat.png" alt="img"
                @click="touchCopy(shareList?.wx.link || '')" />
            <img class="w-20 h-20 " src="@/assets/share/bubble_qq.png" alt="img"
                @click="touchCopy(shareList?.qq.link || '')" />
            <img class="w-20 h-20 " src="@/assets/share/bubble_weibo.png" alt="img"
                @click="touchCopy(shareList?.weibo.link || '')" />
            <img class="w-20 h-20 " src="@/assets/share/bubble_copy_link.png" alt="img"
                @click="touchCopy(shareList?.weibo.link || '')" />
        </div>
    </div>
</template>